<template>
  <div class="Tag">
    <el-tag
    v-for="(item,index) in tags"
    :key="index"
    :closable="item.name !== 'home'"
    :disable-transition = false
    @close = handleClose(item,index)
    @click="changeMenu(item)"
    size="small"
    effect="plain"
    :class="{Tags:$route.name == item.name}"
    type="warning"
    >{{item.label}}</el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    // 获取vuex的标签集合数据
    ...mapState({
      tags: state => state.tabsList,
      currentRoute: state => state.currentMenu
    })
  },
  methods: {
    ...mapMutations({ close: 'closeTab' }),

    // 关闭标签
    handleClose (tag, index) {
      const length = this.tags.length - 1
      // vuex调方法的另一种写法
      this.close(tag)
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (tag.name !== this.$route.name) {
        return
      }
      // 关闭的标签是最右边的话，往左边跳转一个

      if (index === length) {
        this.$router.push({ name: this.tags[index - 1].name })
      } else {
        // 否则往右边跳转
        this.$router.push({ name: this.tags[index].name })
      }
    },

    // 选择标签跳转路由
    changeMenu (item) {
      this.$router.push({ name: item.name })
      // this.currentRoute = item
      this.$store.commit('changeRoute', item)
    },

    // 关闭左侧，关闭右侧，关闭其他，关闭全部
    async closeFn (a) {
      console.log('xiaomi', a, this.currentRoute)
      if (a === 'Left') {
        const index = this.tags.findIndex(item => item.name === this.currentRoute.name)
        this.$store.commit('deleteFn', [index, a])
      } else if (a === 'Right') {
        const index = this.tags.findIndex(item => item.name === this.currentRoute.name)
        this.$store.commit('deleteFn', [index, a])
      } else if (a === 'Others') {
        const arr = []
        this.tags.forEach(item => {
          if (item.name === this.currentRoute.name || item.name === 'home') {
            arr.push(item)
          }
        })
        this.$store.commit('deleteFn', [arr, a])
      } else if (a === 'All') {
        await this.$store.commit('deleteFn', a)
        this.$router.push('/')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.Tag {
    margin-right: 48px;
    height: 50px;
    line-height: 50px;
    border-radius: 6px;
    color: #b5abab;
    font-family: PingFangSC,PingFangSC-Regular;
    .el-tag {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 36px;
      border:#ccc;
      background: #fff;
      border-radius: 6px;
      line-height: 36px;
      color: #b5abab;
      padding: -2px 9px 0 15px;
      font-size: 13px;
      margin-left: 10px;
      margin-top: 14px;
      margin-bottom: 14px;
      font-weight: 400;
      font-family: PingFangSC,PingFangSC-Regular;
    }
    .Tags {
      color: #ffb200;
    }
}
</style>
